<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        background-color: #f5f5f5;
    }


    ul {
        width: 1200px;
        margin: 0 auto;
        list-style: none;
        display: flex;
        flex-wrap: wrap;
    }

    img {
        width: 275px;
        height: 208px;
    }

    li {
        width: 275px;
        display: flex;
        flex-wrap: wrap;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        margin-right: 20px;
        margin-bottom: 30px;
    }

    .info {
        padding: 10px;
    }

    .info h2 {
        width: 255px;
        font-size: 18px;
        font-weight: 600;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        line-height: 26px;
        margin-bottom: 10px;
    }

    .info p {
        font-size: 14px;
        color: #999999;
        line-height: 20px;
        margin-bottom: 10px;
    }

    .info span {
        font-size: 18px;
        font-weight: 600;
        color: #E73424;
        margin-bottom: 20px;
    }
</style>

<body>
    <ul id="goods">

    </ul>



    <script src="./list.js"></script>
    <script>
        let dates = list

        let lists = []

        let res = ''
        for (let i = 0; i < dates.length; i++) {
            let date = new Date(dates[i].dateOfRegistration)
            if (date.getFullYear() > 2015) {
                lists[lists.length] = dates[i]
                let date1 = new Date(lists[lists.length - 1].dateOfRegistration)
                res = `${date1.getFullYear()}年${date1.getMonth()+1}月`
                lists[lists.length - 1].dateOfRegistration = res
            }
        }

        console.log(lists);

        let ul = document.querySelector('#goods')

        for (let i = 0; i < lists.length; i++) {
            let li = document.createElement('li')
            li.innerHTML = `
          
            <img src="${lists[i].cover}" alt="">
            <div class="info">
                <h2>${lists[i].carName}</h2>
                <p>${lists[i].dateOfRegistration}/${lists[i].mileage}万公里</p>
                <span>￥${lists[i].currentPrice}万</span>
            </div>
      
            `

            ul.appendChild(li)
        }
    </script>
</body>

</html>